<template>
    <div class="x-content">
        <div class="x-step" v-for="item in alterationExamineOpinionList" :key="item.id">
            <div class="x-head">
                <div class="x-line"></div>
                <div class="x-text"></div>
            </div>
            <div class="x-main">
                <div class="x-part_1">
                    <span class="x-where">{{item.unit}}</span>
                    <ul>
                        <li :class="!item.status ?  'x-pass' : 'x-refuse'">
                            <div class="logo"></div>
                            <span v-if="!item.status">审查通过</span>
                            <span v-else>审查不通过</span>
                        </li>
                        <li class="x-checkMan">
                            <div>审查人：</div>
                            <el-image style="width: 120px; height: 60px" :src="`${$config.baseUrlImg}${item.signature}`"></el-image>
                        </li>
                        <li class="x-Date">{{item.createTime}}</li>
                    </ul>
                </div>
                <div class="x-part_2">
                    <span>经办人意见：</span>
                    <span>{{item.opinion}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {
        getAlterationExamineOpinionList
    } from "@/api/project1/designChange/countyApply/index";
    export default {
        name: "checkProcess",
        data() {
            return {
                projectId:localStorage.getItem("projectId"),
                alterationId:window.sessionStorage.getItem('alterationId'),
                alterationExamineOpinionList:[],
            };
        },
        created() {
            this.getCountCenterOpionion();
        },
        methods: {
            // 获取区县中心审查意见
            getCountCenterOpionion() {
                let param = {
                    alterationId: this.alterationId,
                    projectId: this.projectId,
                    groupId: 13,
                    orderBy: "type asc"
                }
                getAlterationExamineOpinionList(param).then(res => {
                    if (res.code == 1000) {
                        this.alterationExamineOpinionList = res.data;
                        this.alterationExamineOpinionList.forEach(item=>{
                            let _options=item.opinion.split('-');
                            let _unit = _options[1].slice(0,-4)
                            Vue.set(item,'unit',_unit)
                            Vue.set(item,'view',_options[2])
                        })
                    }
                })
            },
        }
    };
</script>

<style scoped lang="scss">
    .x-content {
        margin-top: 20px;
        background-color: #fff;
        padding: 30px 400px 30px 40px;
    .x-step {
        display: flex;
    .x-head {
        flex-grow: 0;
        position: relative;
    .x-text {
        width: 24px;
        height: 24px;
        border: 2px solid rgba(251, 163, 48, 1);
        border-radius: 50%;
        position: relative;
        background-color: #fff;
    }
    .x-text:after {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        background: rgba(251, 163, 48, 1);
        border-radius: 50%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .x-line {
        position: absolute;
        top: 0;
        left: 11px;
        width: 2px;
        height: 100%;
        background: rgba(251, 163, 48, 1);
    }
    }
    }
    .x-step:last-of-type {
    .x-line {
        display: none;
    }
    }
    .x-main {
        flex-grow: 1;
        margin-left: 20px;
    .x-part_1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    span.x-where {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: rgba(77, 77, 77, 1);
    }
    ul {
        display: flex;
        align-items: center;
    li {
        margin-right: 30px;
        list-style: none;
    }
    li:first-child {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: rgba(77, 77, 77, 1);
        display: flex;
        align-items: center;
    }
    li.x-pass > div.logo {
        display: inline-block;
        width: 16px;
        height: 16px;
        background: rgba(70, 203, 128, 1);
        border-radius: 8px;
        position: relative;
        margin-right: 5px;
    }
    li.x-pass > div.logo:before {
        content: "";
        display: inline-block;
        width: 4px;
        height: 8px;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        position: absolute;
        left: 6px;
        top: 3px;
        transform: rotate(45deg);
    }
    li.x-refuse > div.logo {
        display: inline-block;
        width: 16px;
        height: 16px;
        background: #ff4747;
        border-radius: 8px;
        position: relative;
        margin-right: 5px;
    }
    li.x-refuse > div.logo:before {
        content: "x";
        display: inline-block;
        position: absolute;
        left: 4.3px;
        top: -3.5px;
        color: #fff;
    }
    li:nth-child(2) {
        font-size: 14px;
        font-family: PingFang SC;
    div{
        vertical-align: middle;
        display: inline-block;
        color: #a6a6a6;
    }
    }
    li:last-child {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: rgba(166, 166, 166, 1);
    }
    }
    }
    .x-part_2 {
        padding: 20px;
        background-color: rgba(243, 244, 245, 1);
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        margin-bottom: 40px;
    span:first-child {
        color: #a6a6a6;
    }
    span:last-child {
        color: #4d4d4d;
    }
    }
    }
    }
</style>